<template>
  <div class="home">
    <!-- 搜索框 -->
    <Search :mess="mess" />
    <!-- 导航条 -->
    <van-tabs>
      <van-tab v-for="(item,index) in nav" :title="item"></van-tab>
    </van-tabs>
    <!-- 商品卡片 -->
    <div class="banner">
      <ul class="bannerList">
        <li class="bannerItem" v-for="item in banner" :key="item.id">
          <img :src="item.imgsrc" alt />
          <p class="text">{{item.text}}</p>
        </li>
      </ul>
    </div>
    <!-- <div class="horizontal-container">
      <div class="scroll-wrapper" ref="scroll">
        <div class="scroll-content">
          <div class="scroll-item" v-for="(item, index) in banner" :key="index">
            <img :src="item.imgsrc" alt />
            <p>{{item.text}}</p>
          </div>
        </div>
      </div>
    </div>-->
    <!-- 百亿补贴 -->
    <div class="subsidy">
      <div class="subsidy-left">
        <div v-for="item in subsidyLeft">
          <img :src="item.imgsrc" alt />
          <p class="info">{{item.info}}</p>
          <p class="text">{{item.text}}</p>
        </div>
      </div>
      <div class="subsidy-right">
        <div v-for="item in subsidyRight" :key="item.id">
          <img :src="item.imgsrc" alt />
          <div class="price">
            <span>￥</span>
            <p>{{item.price}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="shopList">
      <div class="shopItem" v-for="item in shopList" :key="item.id">
        <img :src="item.imgsrc" alt />
        <div class="shopInfo">
          <p class="title">{{item.title}}</p>
          <div class="text">
            <p v-for="textItem in item.text">{{textItem}}</p>
          </div>
          <div class="content">
            <div class="contentLeft">
              <div class="price">
                <p class="info">{{item.price.info}}</p>
                <p class="sign">{{item.price.sign}}</p>
                <p class="text">{{item.price.text}}</p>
              </div>
              <div class="num">{{item.num}}</div>
            </div>
            <div class="contentRight">
              <p v-for="iconItem in item.icon" :key="iconItem.id">
                <img :src="iconItem.imgsrc" alt />
              </p>
            </div>
          </div>
          <div class="ranking">{{item.ranking}}</div>
        </div>
      </div>
    </div>
    <tab-bar />
  </div>
</template>

<script>
import instance from "@/api/api.js"
import TabBar from "@/components/TabBar"
import Search from "@/components/Search"
import BScroll from '@better-scroll/core'
export default {
  name: "HomeView",
  data(){
    return {
      mess:"首页搜索",
      nav:null,
      banner:null,
      subsidyLeft:null,
      subsidyRight:null,
      shopList:null,
    }
  },
  components: {
      TabBar,
      Search
  },
  methods:{
    async getData(){
      let {data} = await instance.get("/homepage");
      this.nav = data.nav;
      this.banner = data.banner;
      this.subsidyLeft = data.subsidy.left;
      this.subsidyRight = data.subsidy.right;
      this.shopList = data.shopList;
    },
    // init() {
    //     this.bs = new BScroll(this.$refs.scroll, {
    //       scrollX: true,
    //       probeType: 3 // listening scroll event
    //     })
    // }
  },
  // mounted() {
  //   this.init()
  // },
  created(){
    this.getData();
  },
};
</script>
<style lang="less"  scoped>
.home {
  width: 375px;
  .van-tab__text {
    // #ee0a24
    color: green;
  }
}
// 商品卡片
.bannerList {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  padding-top: 10px;
  .bannerItem {
    width: 73px;
    text-align: center;
    margin-bottom: 10px;
    img {
      width: 39px;
      height: 39px;
    }
    .text {
      font-size: 12px;
      color: #666;
    }
  }
}
// .horizontal-container {
//   .scroll-wrapper {
//     position: relative;
//     width: 90%;
//     margin: 80px auto;
//     white-space: nowrap;
//     border: 3px solid #42b983;
//     border-radius: 5px;
//     overflow: hidden;
//     .scroll-content {
//       display: inline-block;
//     }
//     .scroll-item {
//       height: 50px;
//       line-height: 50px;
//       font-size: 24px;
//       display: inline-block;
//       text-align: center;
//       padding: 0 10px;
//     }
//   }
// }

// 百亿补贴
.subsidy {
  box-sizing: border-box;
  width: 100%;
  height: 98px;
  margin-top: 10px;
  background: #fff;
  padding: 0 12px 0 8px;
  display: flex;
  align-items: center;
  .subsidy-left {
    text-align: center;
    img {
      width: 39px;
      height: 39px;
      margin: 0 auto;
    }
    .info {
      color: #151516;
      font-size: 14px;
      font-weight: 700;
      line-height: 16px;
      margin-bottom: 7px;
    }
    .text {
      color: #777;
      font-size: 12px;
    }
  }
  .subsidy-right {
    flex: 1;
    display: flex;
    justify-content: space-around;
    img {
      width: 64px;
      height: 64px;
    }
    .price {
      width: 100%;
      display: flex;
      color: #e02e24;
      justify-content: center;
      span {
        display: inline-block;
        font-size: 12px;
        padding-top: 2px;
      }
      p {
        font-size: 14px;
      }
    }
  }
}
// 商品列表
.shopList {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px 0 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .shopItem {
    width: 49%;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
    img {
      width: 100%;
    }
    .shopInfo {
      box-sizing: border-box;
      padding: 6px 10px 0px 8px;
      width: 100%;
      .title {
        width: 100%;
        font-size: 12px;
        line-height: 18px;
        white-space: nowrap;
        overflow: hidden;
      }
      .text {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        margin-top: 5px;
        color: #9c9c9c;
        p {
          flex-wrap: nowrap;
        }
        p:first-child {
          color: #e02e24;
        }
      }
      .content {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
        .contentLeft {
          display: flex;
          justify-content: space-between;
          .price {
            display: flex;
            color: #e02e24;
            .info,
            .sign {
              line-height: 26px;
              font-size: 13px;
            }
            .sign {
              font-weight: 700;
            }
            .text {
              color: #e02e24;
              font-size: 17px;
              font-weight: 700;
            }
          }
          .num {
            margin-left: 6px;
            font-size: 13px;
            color: #9c9c9c;
            line-height: 26px;
            display: flex;
          }
        }
        .contentRight {
          display: flex;
          position: relative;
          img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
          }
          p:first-child {
            position: absolute;
            left: -10px;
          }
        }
      }
    }
  }
}
</style>